多頁面網站通常會有一些重複區塊（header、footer...），Vue3 需要在 vue-router 中撰寫 children 來套版，而 Nuxt3 只要新增一個名為「layouts」的資料夾中，把通用的樣板放在裡面，就可以迅速的在不同的內容頁面套用不同的樣板。

預設 layout

前面有說到，我們可以套用不同的樣板，在不特別指定套用哪個樣板的時候就會套用檔案名稱為 default.vue 的樣版。

撰寫 layout

樣板的檔案其實也就是運用了 vue 的 slot，只要熟悉 vue 就能輕易上手，要注意的是做為樣板的 vue 檔案，需要一個 div 做為根元素，撰寫範例如下：

<template>
  <div>
    <MyHeader />
    <slot />
    <MyFooter />
  </div>
</template>

套用 layout

可以在 app.vue 使用 <NuxtLayout> 標籤直接套用樣板，也可以在 pages 裡面的頁面才套用。

• 套用 default.vue

<template>
  <NuxtLayout>
    內容...
  </NuxtLayout>
</template>

• 套用指定樣板（假設樣板檔案名稱為 custom.vue）

<template>
  <NuxtLayout name="custom">
    內容...
  </NuxtLayout>
</template>

變更 layout

如果某個頁面需要替換其他樣板，可以用以下方式設定：

<script setup>
definePageMeta({
  layout: "custom",
});
</script>

layout 的各種靈活操作

layout 的使用方式非常靈活，有許多動態配置方式，Nuxt3 官方文件提供了 Demo，可以直接嘗試各種操作方式。